<template>
  <div>
    <table border="1" align="center" width="50%">
      <tr>
        <td v-if="loading">加载中.....</td>
      </tr>
      <tr>
        <td colspan="6">查询 :<input size="50" :value="searchQuery" @input="updateSearchQuery($event.target.value)"/>
          <button @click="ajax()">ajax</button>
        </td>
      </tr>
      <tr align="center">
        <td v-for="col in mycols">{{ col.name }}</td>
        <td>delete</td>
      </tr>
      <tr align="center" v-for="iteam in filterMyList">
        <td v-for="col in mycols">

          {{ iteam[col.col] }}
        </td>
        <td><button @click="deleteRecord(iteam.stuid)">DELETE</button></td>
      </tr>
      <tr>
        <create @save="init()"></create>
      </tr>
    </table>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import create from '../components/Create.vue'

  var config = require('../../config')

  export default {
    components: {
      create
    },
    computed: {
      ...mapGetters({
        mycols: 'initCols',
        mylist: 'initDataList',
        searchQuery: 'searchQuery',
        loading: 'loading'
      }),
      zzz: () => 'ceshibianliang',
      filterMyList: function () {
        var self = this;
        if (this.mylist != undefined && this.mylist.length > 0) {
          return self.mylist.filter((iteam) => {
            for (self.idx in self.mycols) {
              let colname = self.mycols[self.idx].col
              let colvalue = iteam[colname] + ''
              if (colvalue.indexOf(self.searchQuery) !== -1) {
                return true
              }
            }
          })
        }
      }
    },
    methods: {
      deleteRecord: function (value) {
        var self = this
        this.$axios.delete(config.dev.server+'/vue/main/delStudent.json?stuid='+value)
          .then(function (json) {
            alert('删除成功')
            self.init()
              console.log(json);
          })
          .catch( function (error) {
            alert('删除失败')
            console.log(error);
          });
      },
      init: function () {
        var sto = this.$store
        var router = this.$router
        var self = this
        //不知道下面为什么this.$sotre找不到  在外面定义好吧
        //当创建好之后请求数据库
        this.$axios.get('http://172.16.180.88:8080/vue/main/qryStudent.json?zz=123')
          .then(function (json) {
            console.log(json);
            sto.dispatch('initListLoad', json.data.list)
          })
          .catch(function(error){
            sto.commit('loading')
            alert('ajax请求数据失败');
            //     router.push('estest') //路由跳转
            router.push({name: 'foo',params: { id: 201616 }})
            console.log(error);
          });
      },
      updateSearchQuery: function (value) {
        this.$store.commit('updateSearchQuery', value)
      }
    },
    created () {
      this.init()
    }
  }

</script>
